<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14_语法-v-bind绑定属性名</title>
  <!-- 
  在 Vue 中， `v-bind`  指令不仅可以绑定属性的值，还可以动态绑定属性的名称（属性名）。这使得开发者能够根据数据的变化动态地设置元素的属性名。
  1. 基本用法

  使用  `v-bind`  绑定属性名时，可以使用一个表达式来动态生成属性名。基本语法如下：
  <template>
    <div>
      <input v-bind:[dynamicAttribute]="inputValue" />
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        dynamicAttribute: 'placeholder', // 动态属性名
        inputValue: '请输入内容',
      };
    },
  };
  </script>
  在这个例子中， `dynamicAttribute`  的值是  `'placeholder'` ，因此  `<input>`  元素的  `placeholder`  属性会被设置为  `inputValue`  的值。

  2. 动态属性名的使用场景

  - 动态生成属性：当需要根据某些条件动态生成属性名时，使用  `v-bind`  绑定属性名非常方便。
  - 表单元素：在处理动态表单时，可能需要根据字段的类型或状态来动态设置属性名。

  3. 注意事项

  - 方括号语法：在绑定属性名时，必须使用方括号  `[]` ，以指示 Vue 这是一个动态表达式。
  - 响应式：动态属性名的变化会导致 Vue 重新渲染相应的属性。

  4. 示例

  以下是一个更复杂的示例，演示如何根据条件动态设置属性名：
  <template>
    <div>
      <input v-bind:[dynamicAttribute]="inputValue" />
      <button @click="toggleAttribute">切换属性名</button>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        dynamicAttribute: 'placeholder', // 初始属性名
        inputValue: '请输入内容',
      };
    },
    methods: {
      toggleAttribute() {
        this.dynamicAttribute = this.dynamicAttribute === 'placeholder' ? 'title' : 'placeholder';
      },
    },
  };
  </script>
  在这个例子中，点击按钮会切换  `dynamicAttribute`  的值，从而改变  `<input>`  元素的属性名在  `placeholder`  和  `title`  之间切换。

  总结

  -  `v-bind`  绑定属性名：允许动态设置 HTML 元素的属性名。
  - 方括号语法：使用方括号  `[]`  来表示动态属性名。
  - 适用场景：适合需要根据条件动态生成属性名的场景。
  - 响应式：动态属性名的变化会自动更新对应的属性。

  通过合理使用  `v-bind`  绑定属性名，开发者可以实现更灵活和动态的组件行为，提高应用的可维护性和用户体验。
  -->
</head>
<body>

  <div id="app">
    <h3 :[name]="'attribute'">bind name</h3>
  </div>
  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref, reactive } = Vue

    const app = createApp({
      setup() {
        const name = ref('id')
        return {
          name
        }
      }
    })

    app.mount('#app')

  </script>

  
</body>
</html>